<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>商品页面</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
<input type="hidden" id="productId" name="productId" th:value="${product.id }"/>
<table>
    <tr>
        <td>产品编号</td>
        <td>产品名称</td>
        <td>产品价格</td>
    </tr>
    <tr>
        <td th:text="${product.id}"></td>
        <td th:text="${product.name}"></td>
        <td th:text="${product.price}"></td>
    </tr>
    <tr>
        <td>购买个数:<input type="text" id="buyCounts"/></td>
        <td><input type="button" th:value="生成订单" onclick="createOrder()"></td>
        <td></td>
    </tr>
</table>
</body>
<script type="text/javascript">
    function createOrder() {
        $.ajax({
            url: '[[@{/createOrder}]]',
            type: 'POST',
            data: {"productId": $("#productId").val(), "buyCounts": $("#buyCounts").val()},
            dataType: "json",
            success: function (data) {
                if (data.code == 200) {
                    // debugger;
                    // 提交订单成功后, 进入购买页面
                    window.location.href = "/pay?orderId=" + data.message;
                } else {
                    alert(data.message);
                    console.log(JSON.stringify(data));
                }
            }
        });
    }
</script>

</html>